<style lang="scss" scoped>
    @import '~@/scss/global/colors.scss';
    .grid-container{
        display:grid;
        height:100%;
        /*grid-template-columns:auto auto auto auto;*/
        align-content:start;
        background-color:$content-item-bg;
        padding:20px;
        grid-gap:20px;
    }
    .grid-item{
        /*text-align:center;*/
    }
    .grid-item:nth-child(5){
        grid-column:1 / span 4;
    }
    .grid-item:nth-child(6){
        grid-column:1 / span 2;
    }
    .grid-item:nth-child(7){
        grid-column:3 / span 2;
    }
    .small-chart{
        display:flex;
        position:relative;
        height:45px;
        align-items:flex-end;
    }
    .cont{
        top:0;
        left:0;
        width:100%;
        height:100%;
        .toolbar{
            position:absolute;
            width:0;
            height:0;
            border-top:30px solid rgba($content-border, .3);
            border-right:30px solid transparent;
            cursor:pointer;
            &:hover{
                border-top:30px solid $content-heightLight;
            }
            &:before{
                position:absolute;
                top:-30px;
                left:5px;
                font-size:20px;
                font-weight:bolder;
                color:$content-bg;
            }
        }
        &.zoom-in{
            position:relative;
            .toolbar:before{
                content:'◤';
            }
        }
        &.zoom-out{
            position:fixed;
            z-index:9999;
            .toolbar:before{
                top:-31px;
                left:2px;
                content:'◢';
            }
        }

    }
</style>
<template>
    <ui-main no-padding>
        <div class="cont" :class="zoom ? 'zoom-in' : 'zoom-out'">
            <div class="toolbar" @click="setZoom"></div>
            <div class="grid-container ui scrollbar scroll-teal scroll-hover no-padd">
                <div class="grid-item">
                    <el-card shadow="hover">
                        <div class="t-sub">总销售额</div>
                        <div class="f-30 p-t-20 p-b-20">￥123,123</div>
                        <div class="small-chart">
                            <div>周同比: 12%
                                <i class="icon caret up t-success"></i>
                                日环比: 11%
                                <i class="icon caret down t-danger"></i>
                            </div>
                        </div>
                    </el-card>
                </div>
                <div class="grid-item">
                    <el-card shadow="hover">
                        <div class="t-sub">活动支出</div>
                        <div class="f-30 p-t-20 p-b-20 big-txt">￥73,123</div>
                        <div class="small-chart">
                            <ui-echarts :option="line"></ui-echarts>
                        </div>
                    </el-card>
                </div>
                <div class="grid-item">
                    <el-card shadow="hover">
                        <div class="t-sub">支付笔数</div>
                        <div class="f-30 p-t-20 p-b-20 big-txt">313</div>
                        <div class="small-chart">
                            <ui-echarts :option="bar"></ui-echarts>
                        </div>
                    </el-card>
                </div>
                <div class="grid-item">
                    <el-card shadow="hover">
                        <div class="t-sub">运营活动效果</div>
                        <div class="f-30 p-t-20 p-b-20 big-txt">78%</div>
                        <div class="small-chart">
                            <ui-echarts :option="bar2"></ui-echarts>
                        </div>
                    </el-card>
                </div>
                <div class="grid-item">
                    <el-card shadow="hover">
                        <div slot="header" class="clearfix">
                            <span class="t-sub">销售额</span>
                            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                        </div>
                        <div style="height:300px" class="ui flex">
                            <div class="w-70p">
                                <ui-echarts :option="bar3"></ui-echarts>
                            </div>
                            <div class="item one p-l-30">
                                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                                    <el-menu-item index="1">销售额排名</el-menu-item>
                                    <el-menu-item index="2">销售产品排名</el-menu-item>
                                </el-menu>
                                <div class="ui middle aligned divided list">
                                    <div class="item p-t-10 p-b-10" v-for="n in 4" :key="n">
                                        <div class="right floated content p-t-5">
                                            ￥323,234
                                        </div>
                                        <img v-if="n === 1"
                                            class="ui avatar image"
                                            src="https://semantic-ui.com/images/avatar2/small/lena.png"> <img v-if="n === 2"
                                        class="ui avatar image"
                                        src="https://semantic-ui.com/images/avatar2/small/lindsay.png"> <img v-if="n === 3"
                                        class="ui avatar image"
                                        src="https://semantic-ui.com/images/avatar2/small/molly.png"> <img v-if="n === 4"
                                        class="ui avatar image"
                                        src="https://semantic-ui.com/images/avatar2/small/mark.png">
                                        <div class="content t-sub">工专路 {{n}} 号店</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
                <div class="grid-item">
                    <el-card shadow="hover">
                        <div slot="header" class="clearfix">
                            <span class="t-sub">运营活动</span>
                        </div>
                        <div style="height:400px" class="ui flex column">
                            <div class="item one">
                                <ui-echarts :option="line2"></ui-echarts>
                            </div>
                            <table class="ui very basic collapsing celled table" style="width: 100%;">
                                <thead>
                                <tr>
                                    <th>雇员</th>
                                    <th>次数</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>
                                        <h4 class="ui image header">
                                            <img src="https://semantic-ui.com/images/avatar2/small/lena.png" class="ui mini rounded image">
                                            <div class="content">Lena
                                                <div class="sub header">人力资源</div>
                                            </div>
                                        </h4>
                                    </td>
                                    <td>
                                        22
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h4 class="ui image header">
                                            <img src="https://semantic-ui.com/images/avatar2/small/matthew.png"
                                                class="ui mini rounded image">
                                            <div class="content">Matthew
                                                <div class="sub header">Fabric Design</div>
                                            </div>
                                        </h4>
                                    </td>
                                    <td>
                                        15
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h4 class="ui image header">
                                            <img src="https://semantic-ui.com/images/avatar2/small/lindsay.png"
                                                class="ui mini rounded image">
                                            <div class="content">Lindsay
                                                <div class="sub header">Entertainment</div>
                                            </div>
                                        </h4>
                                    </td>
                                    <td>
                                        12
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h4 class="ui image header">
                                            <img src="https://semantic-ui.com/images/avatar2/small/mark.png" class="ui mini rounded image">
                                            <div class="content">Mark
                                                <div class="sub header">执行</div>
                                            </div>
                                        </h4>
                                    </td>
                                    <td>
                                        11
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h4 class="ui image header">
                                            <img src="https://semantic-ui.com/images/avatar2/small/lindsay.png"
                                                class="ui mini rounded image">
                                            <div class="content">Lindsay
                                                <div class="sub header">Entertainment</div>
                                            </div>
                                        </h4>
                                    </td>
                                    <td>
                                        12
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h4 class="ui image header">
                                            <img src="https://semantic-ui.com/images/avatar2/small/mark.png" class="ui mini rounded image">
                                            <div class="content">Mark
                                                <div class="sub header">执行</div>
                                            </div>
                                        </h4>
                                    </td>
                                    <td>
                                        11
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </el-card>
                </div>
                <div class="grid-item">
                    <el-card shadow="hover">
                        <div slot="header" class="clearfix">
                            <span class="t-sub">销售额类别占比</span>
                        </div>
                        <div style="height:400px">
                            <ui-echarts :option="pie"></ui-echarts>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
    </ui-main>
</template>
<script>
    export default {
        name:'analysis',
        // props:['id'],
        props:['id'],
        data() {
            return {
                zoom:true,
                activeIndex:'1',
                line:{
                    grid:{
                        width:'100%',
                        height:'100%',
                        bottom:'0',
                        left:'0'
                    },
                    tooltip:{
                        trigger:'axis',
                        axisPointer:{
                            type:'cross',
                            label:{
                                backgroundColor:'#6a7985'
                            }
                        }
                    },
                    xAxis:{
                        type:'category',
                        boundaryGap:false
                    },
                    yAxis:{
                        show:false
                    },
                    series:[
                        {
                            name:'邮件营销',
                            type:'line',
                            stack:'总量',
                            areaStyle:{ normal:{} },
                            data:[120, 132, 101, 134, 90, 230, 210]
                        }
                    ]
                },
                line2:{
                    grid:{
                        width:'100%',
                        height:'100%',
                        bottom:'0',
                        left:'0',
                        containLabel:true
                    },
                    tooltip:{
                        trigger:'axis',
                        axisPointer:{
                            type:'cross',
                            label:{
                                backgroundColor:'#6a7985'
                            }
                        }
                    },
                    xAxis:{
                        type:'category',
                        boundaryGap:false
                    },
                    yAxis:{
                        type:'value'
                    },
                    series:[
                        {
                            name:'邮件营销',
                            type:'line',
                            stack:'总量',
                            areaStyle:{ normal:{} },
                            data:[120, 132, 101, 134, 90, 230, 210]
                        }
                    ]
                },
                bar:{
                    color:['#3398DB'],
                    tooltip:{
                        trigger:'axis',
                        axisPointer:{            // 坐标轴指示器，坐标轴触发有效
                            type:'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid:{
                        width:'100%',
                        height:'100%',
                        left:'3%',
                        right:'4%',
                        bottom:'3%'
                        // containLabel:true
                    },
                    xAxis:[
                        {
                            type:'category',
                            data:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                            axisTick:{
                                alignWithLabel:true
                            }
                        }
                    ],
                    yAxis:{ show:false },
                    series:[
                        {
                            name:'直接访问',
                            type:'bar',
                            barWidth:'60%',
                            data:[10, 52, 200, 334, 390, 330, 220]
                        }
                    ]
                },
                bar2:{
                    tooltip:{
                        trigger:'axis',
                        formatter:'{b} : <br />{c1}%',
                        axisPointer:{
                            type:'shadow'
                        }
                    },
                    grid:{
                        width:'100%',
                        height:'100%',
                        left:'3%',
                        right:'4%',
                        bottom:'3%'
                        // containLabel:true
                    },
                    xAxis:{
                        type:'value',
                        show:false
                    },
                    yAxis:{
                        type:'category',
                        data:['-_-'],
                        axisLabel:{
                            show:false
                        },
                        axisLine:{
                            show:false
                        },
                        splitLine:{
                            show:false
                        },
                        axisTick:{
                            show:false
                        }
                    },
                    series:[
                        {
                            name:'2011年',
                            type:'bar',
                            data:[100],
                            itemStyle:{
                                color:'#e2e2e2'
                            }
                        },
                        {
                            name:'2012年',
                            type:'bar',
                            data:[78],
                            barGap:'-100%',
                            label:{
                                show:true,
                                position:'right',
                                padding:2,
                                color:'#555',
                                fontSize:14,
                                formatter:'{c}%'
                            },
                            itemStyle:{
                                color:'#13C2C2'
                            }
                        }
                    ]
                },
                bar3:{
                    tooltip:{
                        trigger:'axis',
                        axisPointer:{            // 坐标轴指示器，坐标轴触发有效
                            type:'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend:{
                        data:['贵阳', '六盘水', '六枝']
                    },
                    grid:{
                        width:'100%',
                        left:'3%',
                        right:'4%',
                        bottom:'3%',
                        containLabel:true
                    },
                    xAxis:[
                        {
                            type:'category',
                            data:['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        }
                    ],
                    yAxis:[
                        {
                            type:'value'
                        }
                    ],
                    series:[
                        {
                            name:'贵阳',
                            type:'bar',
                            data:[320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name:'六盘水',
                            type:'bar',
                            stack:'广告',
                            data:[120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name:'六枝',
                            type:'bar',
                            stack:'广告',
                            data:[150, 232, 201, 154, 190, 330, 410],
                            itemStyle:{
                                color:'#13C2C2'
                            }
                        }
                    ]
                },
                pie:{
                    backgroundColor:'#fff',
                    title:{
                        text:'注册资金',
                        subtext:'2016年',
                        x:'center',
                        y:'center',
                        textStyle:{
                            fontWeight:'normal',
                            fontSize:16
                        }
                    },
                    tooltip:{
                        show:true,
                        trigger:'item',
                        formatter:'{b}: {c} ({d}%)'
                    },
                    legend:{
                        orient:'horizontal',
                        bottom:'0%',
                        data:['<10w', '10w-50w', '50w-100w', '100w-500w', '>500w']
                    },
                    series:[{
                        type:'pie',
                        selectedMode:'single',
                        radius:['25%', '58%'],
                        color:['#86D560', '#AF89D6', '#59ADF3', '#FF999A', '#FFCC67'],

                        label:{
                            normal:{
                                position:'inner',
                                formatter:'{d}%',

                                textStyle:{
                                    color:'#fff',
                                    fontWeight:'bold',
                                    fontSize:14
                                }
                            }
                        },
                        labelLine:{
                            normal:{
                                show:false
                            }
                        },
                        data:[{
                            value:3661,
                            name:'<10w'
                        }, {
                            value:5713,
                            name:'10w-50w'
                        }, {
                            value:9938,
                            name:'50w-100w'
                        }, {
                            value:17623,
                            name:'100w-500w'
                        }, {
                            value:3299,
                            name:'>500w'
                        }]
                    }, {
                        type:'pie',
                        radius:['58%', '83%'],
                        itemStyle:{
                            normal:{
                                color:'#F2F2F2'
                            },
                            emphasis:{
                                color:'#ADADAD'
                            }
                        },
                        label:{
                            normal:{
                                position:'inner',
                                formatter:'{c}家',
                                textStyle:{
                                    color:'#777777',
                                    fontWeight:'bold',
                                    fontSize:14
                                }
                            }
                        },
                        data:[{
                            value:3661,
                            name:'<10w'
                        }, {
                            value:5713,
                            name:'10w-50w'
                        }, {
                            value:9938,
                            name:'50w-100w'
                        }, {
                            value:17623,
                            name:'100w-500w'
                        }, {
                            value:3299,
                            name:'>500w'
                        }]
                    }]
                }
            }
        },
        mounted() {
            // console.log(this.id);
            let myData = [[120, 132, 101, 134, 90, 230, 210], [12, 122, 111, 634, 90, 240, 210], [20, 232, 101, 134, 80, 230, 110], [170, 132, 101, 34, 30, 230, 110]]
            let num = 0
            setInterval(() => {
                // this.line2.series[0].data = myData[num++]
                this.line.series[0].data = myData[num++]
                num &= 3;
            }, 1000);
        },
        watch:{},
        methods:{
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            setZoom() {
                this.zoom = !this.zoom;
                // 告诉echart需要重绘
                this.$eventHub.$emit('echartResize', true)
            }

        },
        /*beforeRouteLeave(t,f, next){
            this.$message({
                type:'info',
                message:`action: 123123`
            });
        }*/
    }
</script>
